<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/sys-admin' }"><i class="el-icon-s-promotion"></i>后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-table :data="tableData" border style="width: 600px">
      <el-table-column type="index" label="编号" width="180">
      </el-table-column>
      <el-table-column  label="轮播图" width="300">
        <!--自定义内容必须写在template里面-->
        <template slot-scope="scope" src="">
          <!--scope.row得到当前行对应的数组里面的对象-->
          <img :src="scope.row.url" width="100%" alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popconfirm
              title="确定删除此轮播图吗？"
              @confirm="bannerDelete(scope.row)">
            <el-button size="mini"
                       type="danger" slot="reference">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods:{
    deleteConfirm(product){
      let title = '提示'
      let message = '此操作将永久删除 '+product.name+ ' 轮播图,是否继续?';
      this.$confirm(message,title,{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() => {
        this.bannerDelete(product);
      }).catch(() => {

      });
    },
    handleEdit(product) {
      // alert('你点击了【' + album.name + ' (id=' + album.id + ')】的【编辑】按钮');

    },
    bannerDelete(product) {
      // alert('你点击了【' + album.name + ' (id=' + album.id + ')】的【删除】按钮');
      console.log(product.row+'handleDelete..  id=' + product.id)
      let url = "http://localhost:8090/banner/"+ product.id+"/delete";
      console.log("url="+url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) =>{
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000){
          console.log('删除成功');
          this.loadBannerList();
        }else {
          this.$message.error(responseBody.message);
        }
        this.loadBannerList();
      })
    },
    loadBannerList(){
      console.log('loadBannerList..')
      let url = "http://localhost:8090/banner";
      console.log("url="+url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) =>{
        console.log(response);
        let responseBody = response.data;
        console.log("!!!!"+responseBody.id);
        this.tableData = responseBody.data;
      });
    }
  },
  mounted() {
    console.log("mounted..")
    this.loadBannerList();
  },
  created() {
    console.log('created..')
  }
}
</script>

<style scoped>

</style>